<template>
  <div class="nicknameBox">
    <!-- 标题 -->
    <header-box title="昵称" :showLeft="true" :showRight="true"></header-box>
    <group class="nameInput">
      <x-input v-model="nameValue" :max="20" placeholder="设置个性昵称(不超过20字符)" @on-blur="changeInput"></x-input>
    </group>
    <div class="hint">昵称由英文、数字组成。</div>
    <div class="btnBox">
      <x-button type="primary" :disabled="!nameValue" @click.native="confirm">保存</x-button>
    </div>
  </div>
</template>

<script>
import HeaderBox from '@/components/header'
import { XHeader, XInput, Group, XButton } from 'vux'
export default {
  components: {
    HeaderBox,
    XInput,
    Group,
    XButton
  },
  data() {
    return {
      userId: '',
      nameValue: ''
    }
  },
  mounted() {
    this.nameValue = this.$route.query.data.name
    this.userId = this.$route.query.data.id
  },
  methods: {
    confirm() {
      if (!this.nameValue) {
      
        this.$vux.toast.text('输入内容不正确')
      } else {
        // 修改数据
        this.$http
          .get('url', {
            params: {
              id: this.userId,
            }
          })
          .then(res => {})
        this.$router.back()
      }
    },
    changeInput(value) {
      const reg = /^(?![0-9]+)(?![a−zA−Z]+)(?![a-zA-Z]+)(?![a−zA−Z]+)[0-9A-Za-z]{8,20}$/
      if (!reg.test(this.nameValue)) {
        this.nameValue = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nicknameBox {
  /deep/.weui-cells {
    margin-top: -2px;
  }
  .nameInput {
    margin: 20px 0;
  }
  .hint {
    color: #a8a8a8;
    font-size: 28px;
    padding: 0 20px;
  }
  .btnBox {
    padding: 20px;
  }
}
</style>